<template>
  <ul class="menu" v-show="visible">
    <template v-for="(item, index) in menus">
      <li :key="index" class="menu-item" v-if="item.type !== 'divider'" @click="choose(item)">
        {{ item.title }}
      </li>
      <li :key="index" class="divider" v-else></li>
    </template>
  </ul>
</template>

<script>
export default {
  props: {
    menus: {
      type: Array,
      default: () => []
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    choose(item) {
      this.$emit("select", item)
    }
  }
}
</script>

<style lang="less" scoped>
.menu {
  position: absolute;
  top: 21px;
  --additional-box-shadow: 0 0 0 0 white;
  --app-color-light-hsl: 240, 24%, 100%;
  padding: 5px;
  border-radius: 5px;
  z-index: 100;
  width: 140px;
  max-width: 140px;
  box-shadow: rgba(0, 0, 0, 0.3) 0 0 11px 0, var(--additional-box-shadow);
  background-color: hsla(var(--app-color-light-hsl), 0.3);
  backdrop-filter: blur(12px);
  .menu-item {
    letter-spacing: 0.4px;
    text-align: left;
    border-radius: 5px;
    padding: 5px 0;
    padding-left: 10px;
    // transition: dis 0.3;
    &:hover {
      color: white;
      background-color: rgb(50, 115, 212);
    }
  }
  .divider {
    width: 100%;
    margin: 4px 0;

    border: solid 1px rgb(215, 212, 218);
    border-top: 0;
  }
}
</style>
